<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Karamu | Desktop</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <link rel="stylesheet" href="css/desktop.css">

    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-57-precomposed.png">
    <link rel="shortcut icon" href="favicon.ico">

    <script src="js/lib/modernizr-2.6.2.min.js"></script>
    <!--[if lt IE 9]> <script src="js/lib/html5shiv.js"></script> <![endif]-->
</head>
<body>

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="navbar-inner">
            <div class="container-fluid">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <i class="icon-bar"></i>
                    <i class="icon-bar"></i>
                    <i class="icon-bar"></i>
                </a>
                <a class="brand" id="start-menu" href="#"><img src="images/logo.png" style="height:20px" /></a>
                <div id="dock"></div>
                <div class="nav-collapse collapse navbar-inverse-collapse">
                    <ul class="nav pull-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user icon-white"></i> Username <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#settings"><i class="icon-cog"></i> Settings</a></li>
                                <li><a href="#login" data-toggle="modal"><i class="icon-circle-arrow-left"></i> Logout</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-envelope icon-white"></i> Messages <span class="badge badge-info">5</span> <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#"><strong>NextPayDayAdvance:</strong> Get up to 1500 USD , let us help</a></li>
                                <li><a href="#"><strong>Credit Summary:</strong> View Your 3 Credit Scores Fast</a></li>
                                <li><a href="#"><strong>NeuropathyTreatmentGroup:</strong> 1 Werid Trick To Ease Neuropathy Pain...</a></li>
                                <li><a href="#"><strong>Norman Chan:</strong> $47.1M USD For You</a></li>
                                <li><a href="#"><strong>Casino:</strong> Scratch below to get your $100 FREE!</a></li>
                            </ul>
                        </li>
                        <li><a href="index.html"><i class="icon-home icon-white"></i> Dashboard</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <div id="desktop" class="desktop" style="">
        <img id="desktop-background" src="images/desk.jpg" />
        <div id="sidebar"></div>
        <div id="windows"></div>
        <div id="overlay">
            <div id="desktop-gadget-store" class="collapse">
                <div class="container-fluid">
                    <div id="desktop-gadget-store-carousel" class="carousel slide" data-interval="false">
                        <div class="row-fluid">
                            <form class="span6 form-inline form-search" role="form">
                                <div class="span4 control-group">
                                    <select class="span12" name="gadget-categories"></select>
                                </div>
                                <div class="span8 input-append">
                                    <input class="search-query" type="text" name="gadget-search" data-provide="typeahead" autocomplete="off" placeholder="All Gadgets">
                                    <button type="submit" class="btn">Search</button>
                                </div>
                            </form>
                            <div class="span6 pagination">
                                <ul class="pull-right"></ul>
                            </div>
                        </div>
                        <div class="carousel-inner"></div>
                        <div class="btn-primary close-drawer"><i class="icon-eject icon-white"></i></div>
                    </div>
                </div>
            </div>
            <div id="search-bar">
                <div class="input-group pull-left">
                    <input type="text" placeholder="Search" data-target="#search" autocomplete="off" id="search">
                </div>
                <div class="group-links pull-left">

                </div>
                <div class="buttons pull-right">
                    <button class="btn btn-inverse"                                                            id="add-group" ><i class="icon-plus icon-white"         ></i></button>
                    <button class="btn btn-inverse" data-toggle="collapse" data-target="#desktop-gadget-store" id="show-store"><i class="icon-shopping-cart icon-white"></i></button>
                </div>
            </div>
            <ul id="groups" class="clearfix"></ul>
        </div>
    </div>

    <!-- Modal -->
    <div id="login" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="loginLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">        <div class="modal-dialog">
            <div class="modal-content">
                <form class="form-login">
                    <div class="modal-header">
                        <h4 id="loginLabel" class="modal-title">Please Log In</h4>
                    </div>
                    <div class="modal-body">
                        <input type="text" name="username" class="input-block-level" placeholder="Username" value="john.doe">
                        <input type="password" name="password" class="input-block-level" placeholder="Password" value="password">
                        <label class="checkbox">
                            <input type="checkbox" name="remember-me" value="remember-me" checked="true"> Remember me
                        </label>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary btn-large" type="submit">Sign in</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
    <script>window.jQuery || document.write('<scr' + 'ipt src="js/lib/jquery-1.10.2.min.js"><\/scr' + 'ipt>')</script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
    <script>window.jQuery || document.write('<scr' + 'ipt src="js/lib/jquery-ui-1.10.3.min.js"><\/scr' + 'ipt>')</script>
    <script src="js/lib/jquery-ui-1.10.3.patch.js"></script>
    <script src="js/lib/plugins.js"></script>
    <script src="js/lib/jquery.cookie.js"></script>
    <script src="js/lib/underscore-min.js"></script>
    <script src="/gadgets/js/shindig-container:core:rpc:pubsub-2.js?c=1&debug=1&nocache=1&container=default"></script>
    <script src="js/lib/shindig-container.patch.js"></script>
    <script src="js/lib/bootstrap.min.js"></script>

    <!-- Views: Catalog -->
    <script id="template-select-option" type="text/html">
        <option value="<%= value %>"><%= label %></option>
    </script>
    <script id="template-pager-arrow" type="text/html">
        <li data-target="<%= target %>" data-slide="<%= slide %>"><a href="#"><%= label %></a></li>
    </script>
    <script id="template-pager-number" type="text/html">
        <li data-target="<%= target %>" data-slide-to="<%= slideTo %>"><a href="#"><%= label %></a></li>
    </script>
    <script id="template-pager-page" type="text/html">
        <div class="item"><div class="row-fluid"></div></div>
    </script>
    <script id="template-gadget-preview" type="text/html">
        <div class="span4 media gadget-preview">
            <img class="thumbnail pull-left" src="<%= gadget.thumbnail %>" width="96" height="96" />
            <div class="media-body">
                <h4 class="media-heading"><%= gadget.title %></h4>
                <p class="muted">
                    <small>Category: <strong><%= gadget.category %></strong><br />
                           By <strong><a href="mailto:<%= gadget.author_email %>"><%= gadget.author %></a></strong> at <strong><%= gadget.organization %></strong></small>
                </p>
                <p><%= gadget.description %></p>
                <p><a href="<%= gadget.url %>" class="btn btn-primary"><i class="icon-plus"></i> Add to Dashboard</a></p>
            </div>
        </div>
    </script>

    <!-- Views: Desktop -->
    <script id="template-desktop-gadget" type="text/html">
        <div id="<%= id %>" class="gadget active windowIndex" style="<%= style %>">
            <div class="navbar">
                <div class="navbar-inner">
                    <span class="title"><%= title %></span>
                    <span class="icons">
                        <span class="icon minimize"><i class="icon-circle-arrow-up"></i></span>
                        <span class="icon maximize"><i class="icon-fullscreen"></i></span>
                        <span class="icon remove"  ><i class="icon-remove"></i></span>
                    </span>
                </div>
            </div>
            <div id="<%= id %>-body" class="gadget-body"></div>
            <div id="<%= id %>-dimmer" class="gadget-dimmer"></div>
        </div>
    </script>

    <script id="template-desktop-group-favorites" type="text/html">
        <li class="group favorites" id="<%= id %>">
            <span class="group-icon"><span class="<%= icon %> icon-white"></span></span>
            <span class="group-name"><%= title %></span>
            <ul class="gadgets"></ul>
        </li>
    </script>

    <script id="template-desktop-group" type="text/html">
        <li class="group dynamic" id="<%= id %>">
            <span class="group-icon"><i class="<%= icon %> icon-white"></i></span>
            <span class="group-name"><%= title %></span>
            <span class="group-edit"><i class="icon-edit icon-white" alt="Rename Group" title="Rename Group"></i></span>
            <span class="group-name-input"><input type="text" value="<%= title %>" /></span>
            <span class="group-check"><button class="btn btn-inverse" type="button"><i class="icon-check icon-white"></i> Save</button><span> or </span><span class="cancel">Cancel</span></span>
            <span class="group-remove pull-right"><i class="icon-remove icon-white" alt="Delete Group" title="Delete Group"></i></span>
            <ul class="gadgets"></ul>
        </li>
    </script>

    <script id="template-desktop-group-link" type="text/html">
        <a href="#<%= id %>" class="btn btn-inverse"><%= title %></a>
    </script>

    <script id="template-desktop-sidebar-icon" type="text/html">
        <a class="sidebar-icon" href="<%= url %>">
            <img src="<%= thumbnail %>" alt="<%= title %>" title="<%= title %>" /><br />
            <span class="gadget-name"><%= title %></span>
        </a>
    </script>

    <script id="template-desktop-gadget-shortcut" type="text/html">
        <li class="gadget-shortcut">
            <a class="gadget-link" href="<%= url %>">
                <img src="<%= thumbnail %>" alt="<%= title %>" title="<%= title %>" /><br />
                <span class="gadget-name"><%= title %></span>
            </a>
            <a class="gadget-remove"><i class="icon-remove icon-white"></i></a>
        </li>
    </script>

    <script id="template-desktop-gadget-button" type="text/html">
        <li>
            <a class="btn" href="#<%= id %>">
                <%= title %>
                <i class="icon-circle-arrow-down"></i>
                <i class="icon-fullscreen"></i>
            </a>
        </li>
    </script>

    <!-- Controllers -->
    <script src="js/controllers/karamu.js"></script>
    <script src="js/controllers/catalog.js"></script>
    <script src="js/controllers/preview.js"></script>

    <script src="js/controllers/dashboard/groups.js"></script>

    <script src="js/controllers/desktop/group.js"></script>
    <script src="js/controllers/desktop/shortcut.js"></script>
    <script src="js/controllers/desktop/desktop.js"></script>
    <script src="js/controllers/desktop/gadget.js"></script>

    <!-- Models -->
    <script src="js/models/desktop/models.js"></script>

    <!-- App Controller -->
    <script src="js/controllers/desktop.js"></script>

  </body>
</html>